<template>
	<view class="container">
			<z-paging ref="paging" v-model="dataList" @query="queryList">
	       <template #top>
			   <view class="container-head">
			   	<u-search placeholder="请输入搜索内容" v-model.lazy="searchDto.keyword" height="70"></u-search>
			   </view>
		   </template>
		<view class="container-goods">
		<view class="uni-product-list">
		    <view class="uni-product" v-for="(product,index) in dataList" :key="index" @click="handleGoodsDetail(product)">
		        <view class="image-view">
		            <image class="uni-product-image" :src="product.sku_image"></image>
		        </view>
		        <view class="uni-product-title">{{product.sku_name}}</view>
		        <view class="uni-product-price">
		            <!-- <text class="uni-product-price-favour">&yen;{{product.originalPrice}}</text> -->
		            <text class="uni-product-price-original">&yen;{{product.price}}</text>
		            <!-- <text class="uni-product-tip">{{product.tip}}</text> -->
		        </view>
		    </view>
		</view>
		</view>
		</z-paging>
	</view>
</template>

<script>
	import request from "@/api/request.js"
	export default {
	  data(){
		  return {
			  searchDto: {
				keyword: '',
				page: 1,
				page_size: 10,
			  },
			  dataList: [],
			  productList: [
				  {
				          image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
				          title: 'Apple iPhone X 256GB 深空灰色 移动联通电信4G手机',
				          originalPrice: 9999,
				          favourPrice: 8888,
				          tip: '自营'
				      }
			  ]
		  }
	  },
	  watch: {
		"searchDto.keyword"(newV){
		   this.$refs.paging.reload()
		}
	  },
	  methods: {
		  handleGoodsDetail(item1) {
		  	uni.navigateTo({
		  		url: `/pages/product/index?id=${item1.goods_id}`
		  	})
		  },
			queryList(page, page_size) {
				uni.showLoading({
					title: '加载中...'
				})
				const that = this
				this.searchDto.page = page
				this.searchDto.page_size = page_size
				request({
					url: '/kx/Shop/page',
					data: this.searchDto,
					method: 'POST',
					successCb(res) {
						uni.hideLoading()			
							res.data.list.forEach(item => {
							  item.sku_image = 'https://kx.taipingkeji.com/' + item.sku_image	
							})
						that.$refs.paging.complete(res.data.list);
					},
					failCb() {
						uni.hideLoading()
						that.$refs.paging.complete(false);
					}
				})
			}
	  }
	}
</script>

<style lang="scss" scoped>

.container {
	width: 100%;
	min-height: 100vh;
	background: #f3f3f3;
	&-head {
	  width: 100%;
	  padding: 20rpx 0 20rpx 0;
	  background: #ffffff;
	}
	&-none {
	  	
	}
	&-goods {
	  padding-bottom: 100rpx;
	}
}
.uni-product-list {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
		margin: 0 10rpx;
    }

    .uni-product {
        padding: 20rpx;
		background-color: #ffffff;
		margin: 10rpx;
		font-size: 24rpx;
        display: flex;
        flex-direction: column;
		border-radius: 20rpx;
    }

    .image-view {
        height: 280rpx;
        width: 280rpx;
        margin: 12rpx 0;
    }

    .uni-product-image {
        height: 280rpx;
        width: 280rpx;
    }

    .uni-product-title {
        width: 300rpx;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        line-height: 1.5;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .uni-product-price {
        margin-top: 10rpx;
        font-size: 28rpx;
        line-height: 1.5;
        position: relative;
    }

    .uni-product-price-original {
        color: #e80080;
    }

    .uni-product-price-favour {
        color: #888888;
        text-decoration: line-through;
        margin-left: 10rpx;
    }

    .uni-product-tip {
        position: absolute;
        right: 10rpx;
        background-color: #ff3333;
        color: #ffffff;
        padding: 0 10rpx;
        border-radius: 5rpx;
    }
</style>